<template>
  <div class="w-full direction-column">
    <div class="w-full flex justify-center relative">
      <el-image class="w-[100%]" :src="bgImgPath?.bgImg26" lazy />
      <div
        class="w-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center p-4">
        <div class="text-white text-center">
          <div class="text-3xl font-bold text-[#ff6839]">
            {{ homeConfig?.title }}
          </div>
          <div class="text-2xl font-bold text-white tracking-wider drop-shadow-lg">
            {{ homeConfig?.englishTitle }}
          </div>
          <div class="text-1xl">
            {{ homeConfig?.subtext }}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="w-full flex justify-center items-center relative">
    <div class="w-full flex  direction-column p-4 bg-[#f2f2f2]">
      <div class="flex direction-column justify-center items-center">
        <div class="hexagon-white-mobile">
          <el-image :src="iconPath?.icon10" lazy />
        </div>
        <div class="text-2xl font-bold text-blue-600">
          {{ homeConfig?.Enterprise[0].title }}
        </div>
        <div class="text-1xl font-bold text-gray-600 mt-2.5">
          {{ homeConfig?.Enterprise[0].content }}
        </div>
      </div>
      <div class="flex direction-column mt-2.5 justify-center items-center">
        <div class="hexagon-mobile">
          <div class="hexagon-content">
            <el-image class="w-[100px]" :src="iconPath?.icon6" lazy />
          </div>
        </div>
        <div class="text-2xl font-bold text-blue-600">
          {{ homeConfig?.Enterprise[1].title }}
        </div>
        <div class="text-1xl font-bold text-gray-600 mt-2.5">
          {{ homeConfig?.Enterprise[1].content }}
        </div>
      </div>
      <div class="flex direction-column mt-2.5 justify-center items-center ">
        <div class="hexagon-white-mobile">
          <el-image class="w-[120px]" :src="iconPath?.icon7" lazy />
        </div>
        <div class="text-2xl font-bold text-blue-600">
          {{ homeConfig?.Enterprise[2].title }}
        </div>
        <div class="text-1xl font-bold text-gray-600 mt-2.5">
          {{ homeConfig?.Enterprise[2].content }}
        </div>
        <div class="text-1xl font-bold text-gray-600 mt-1">
          {{ homeConfig?.Enterprise[2].paratext }}
        </div>
      </div>
      <div class="flex direction-column mt-2.5 justify-center items-center ">
        <div class="hexagon-mobile">
          <div class="hexagon-content">
            <el-image class="w-[100px]" :src="iconPath?.icon8" lazy />
          </div>
        </div>
        <div class="text-2xl font-bold text-blue-600">
          {{ homeConfig?.Enterprise[3].title }}
        </div>
        <div class="text-1xl font-bold text-gray-600 mt-2.5">
          {{ homeConfig?.Enterprise[3].content }}
        </div>
        <div class="text-1xl font-bold text-gray-600 mt-1">
          {{ homeConfig?.Enterprise[3].paratext }}
        </div>
      </div>
      <div class="flex direction-column mt-2.5 justify-center items-center">
        <div class="hexagon-white-mobile">
          <el-image class="w-[110px]" :src="iconPath?.icon9" lazy />
        </div>
        <div class="text-2xl font-bold text-blue-600">
          {{ homeConfig?.Enterprise[4].title }}
        </div>
        <div class="text-1xl font-bold text-gray-600 mt-2.5">
          {{ homeConfig?.Enterprise[4].content }}
        </div>
        <div class="text-1xl font-bold text-gray-600 mt-1">
          {{ homeConfig?.Enterprise[4].paratext }}
        </div>
      </div>
      <div class="flex direction-column mt-2.5 justify-center items-center">
        <div class="hexagon-mobile">
          <div class="hexagon-content flex direction-column text-4xl font-bold text-gray-600">
            <div>時</div>
            <div>達</div>
          </div>
        </div>
        <div class="text-2xl font-bold text-blue-600">
          {{ homeConfig?.Enterprise[5].title }}
        </div>
        <div class="text-1xl font-bold text-gray-600 mt-2.5">
          {{ homeConfig?.Enterprise[5].content }}
        </div>
        <div class="text-1xl font-bold text-gray-600 mt-1">
          {{ homeConfig?.Enterprise[5].paratext }}
        </div>
      </div>
    </div>
  </div>
  <div class="flex direction-column p-4">
    <div class="w-[110px] h-[110px] rounded-full bg-[#f2f2f2] flex justify-center items-center">
      <div class="w-[90px] h-[90px] rounded-full bg-[#409eff] flex justify-center items-center">
        <el-image class="w-10" :src="iconPath?.icon1" lazy />
      </div>
    </div>
    <div class="text-2xl font-bold text-gray-600">
      {{ homeConfig?.ServiceProcess[0].title }}
    </div>
    <div class="text-1xl text-gray-600 mt-2.5">
      {{ homeConfig?.ServiceProcess[0].content }}
    </div>
  </div>
  <div class=" flex flex-direction-column p-4">
    <div class="w-[110px] h-[110px] rounded-full bg-[#f2f2f2] flex justify-center items-center">
      <div class="w-[90px] h-[90px] rounded-full bg-[#409eff] flex justify-center items-center">
        <el-image class="w-10" :src="iconPath?.icon2" lazy />
      </div>
    </div>
    <div class="text-2xl font-bold text-gray-600">
      {{ homeConfig?.ServiceProcess[1].title }}
    </div>
    <div class="text-1xl text-gray-600 mt-2.5">
      {{ homeConfig?.ServiceProcess[1].content }}
    </div>
  </div>
  <div class="p-4 flex flex-direction-column">
    <div class="w-[110px] h-[110px] rounded-full bg-[#f2f2f2] flex justify-center items-center">
      <div class="w-[90px] h-[90px] rounded-full bg-[#409eff] flex justify-center items-center">
        <el-image class="w-10" :src="iconPath?.icon1" lazy />
      </div>
    </div>
    <div class="text-2xl font-bold text-gray-600">
      {{ homeConfig?.ServiceProcess[2].title }}
    </div>
    <div class="text-1xl text-gray-600 mt-2.5">
      {{ homeConfig?.ServiceProcess[2].content }}
    </div>
  </div>
  <div class="p-4  flex flex-direction-column">
    <div class="w-[110px] h-[110px] rounded-full bg-[#f2f2f2] flex justify-center items-center">
      <div class="w-[90px] h-[90px] rounded-full bg-[#409eff] flex justify-center items-center">
        <el-image class="w-10" :src="iconPath?.icon2" lazy />
      </div>
    </div>
    <div class="text-2xl font-bold text-gray-600">
      {{ homeConfig?.ServiceProcess[3].title }}
    </div>
    <div class="text-1xl text-gray-600 mt-2.5">
      {{ homeConfig?.ServiceProcess[3].content }}
    </div>
  </div>
  <div class="p-4  flex flex-direction-column">
    <div class="w-[110px] h-[110px] rounded-full bg-[#f2f2f2] flex justify-center items-center">
      <div class="w-[90px] h-[90px] rounded-full bg-[#409eff] flex justify-center items-center">
        <el-image class="w-10" :src="iconPath?.icon1" lazy />
      </div>
    </div>
    <div class="text-2xl font-bold text-gray-600">
      {{ homeConfig?.ServiceProcess[4].title }}
    </div>
    <div class="text-1xl text-gray-600 mt-2.5">
      {{ homeConfig?.ServiceProcess[4].content }}
    </div>
  </div>
  <div class="p-4 flex flex-direction-column">
    <div class="w-[110px] h-[110px] rounded-full bg-[#f2f2f2] flex justify-center items-center">
      <div class="w-[90px] h-[90px] rounded-full bg-[#409eff] flex justify-center items-center">
        <el-image class="w-10" :src="iconPath?.icon2" lazy />
      </div>
    </div>
    <div class="text-2xl font-bold text-gray-600">
      {{ homeConfig?.ServiceProcess[5].title }}
    </div>
    <div class="text-1xl text-gray-600 mt-2.5">
      {{ homeConfig?.ServiceProcess[5].content }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";
import { useConfig } from "@/composables/useConfig";
import bgImgPath from "./bgImgPath/index";
import iconPath from "./bgImgPath/iconPath";

const {
  getHomeConfig,
} = useConfig();

const homeConfig = computed(() => getHomeConfig());

</script>

<style scoped>
/* 页面特定样式 */
/* 隐藏所有方向的滚动条 */
.no-scrollbar {
  /* width: 100vw;
  height: calc(100vh); */
  overflow-y: auto;
  -ms-overflow-style: none;
  /* IE/Edge */
  scrollbar-width: none;
  /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge */
}

.direction-column {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 六边形 */
.hexagon-mobile {
  width: 120px;
  height: 120px;
  /* 保持正六边形比例 */
  background-color: #3498db;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hexagon-white-mobile {
  width: 120px;
  height: 120px;
  /* 保持正六边形比例 */
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* 上层：填充内容的六边形（略小，形成“内边距”效果）*/
.hexagon-content {
  width: calc(100% - 3px);
  /* 减去 2×边框宽度 */
  height: calc(100% - 3px);
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.font-family-Microsoft {
  font-family: Microsoft JhengHei, 微軟正黑體, 微軟雅黑體;
}

.flex-direction-column {
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
}

.flex-direction-column-start {
  flex-direction: column;
  align-items: start;
  justify-content: start;
}
</style>
